<!--  -->
<template>
    <div class="menus">

        <div class="item" :class="{ checked: item.url == currentUrl }" @click="navigate(item.url!)" v-for="item in leftMenu"
            :key="item.id">
            <i class="iconfont"  :class="[item.ico, { blue: item.url === currentUrl }]"></i>
            <label for="">{{ item.name.substring(0, 2) }}</label>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { useRouter, useRoute } from 'vue-router'
import { Menu } from '../../service/menu/type'
import { ref, watch } from 'vue'
import { useUserStore } from '../../store';
import { storeToRefs } from 'pinia';
const store = useUserStore();
const { menus } = storeToRefs(store);



const router = useRouter();
const route = useRoute();
// let menuList = JSON.parse(sessionStorage.getItem("menu")!) as Array<Menu>;

//let menuList = JSON.parse(sessionStorage.getItem("menu")!) as Array<Menu>;
const leftMenu = ref<Array<Menu>>([]);

leftMenu.value = menus.value.filter((item:any) => item.pid === 0 && item.postion == "left");

const navigate = (url: string) => {
    router.push(url);
}
const currentUrl = ref("");

watch(() => route.path, () => {
    
    currentUrl.value = route.path;

}, { immediate: true })



</script>
<style scoped lang="less">
.menus {
    height: 100%;
    width: 30px;
    box-sizing: border-box;
    padding-top: 20px;
    background-color: #f4f4f4;
    border-top: 1px solid #e5e5e5;
    flex: 0 0 95px; max-width: 95px; min-width: 95px; width: 95px;
    position: fixed;
    left: 0;
    .item {
        display: flex;
        height: 50px;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
        box-sizing: border-box;
        font-size: 13px;

        i {
            font-size: 28px;
            color: #727e96;

            &.icon-wuyeguanli {
                font-size: 34px;
            }

            &.icon-qitafeiyong {
                font-size: 24px;
            }

            &.icon-tupian {
                font-size: 24px;
            }

            &.icon-mendian {
                font-size: 24px;
            }
            
        }
        .blue{
                color: #417ff4;
            }

        label {
            margin-top: 2px;
        }

        &.checked {
            color: #417ff4;
            position: relative;

            &::before {
                content: '';
                width: 5px;
                height: 100%;
                background: #417ff4;
                position: absolute;
                left: 0;
                top: 0;
            }
        }
    }
}

</style>